<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%
	pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>预案管理</title>
<link href="${APP_PATH}/static/css/style.css" rel="stylesheet" type="text/css" />
<link href="${APP_PATH}/static/css/xilaxuanze.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="${APP_PATH}/static/js/jquery.js"></script>

<script type="text/javascript">
$(function(){	
	//移到右边
	$('#add').click(function(){
		//先判断是否有选中
		if(!$("#select1 option").is(":selected")){			
			alert("请选择需要移动的选项")
		}
		//获取选中的选项，删除并追加给对方
		else{
			$('#select1 option:selected').appendTo('#select2');
		}	
	});
	
	//移到左边
	$('#remove').click(function(){
		//先判断是否有选中
		if(!$("#select2 option").is(":selected")){			
			alert("请选择需要移动的选项")
		}
		else{
			$('#select2 option:selected').appendTo('#select1');
		}
	});
	
	//全部移到右边
	$('#add_all').click(function(){
		//获取全部的选项,删除并追加给对方
		$('#select1 option').appendTo('#select2');
	});
	
	//全部移到左边
	$('#remove_all').click(function(){
		$('#select2 option').appendTo('#select1');
	});
	
	//双击选项
	$('#select1').dblclick(function(){ //绑定双击事件
		//获取全部的选项,删除并追加给对方
		$("option:selected",this).appendTo('#select2'); //追加给对方
	});
	
	//双击选项
	$('#select2').dblclick(function(){
		$("option:selected",this).appendTo('#select1');
	});
	
});
</script>

<script>  

$(function () {
	//全选或全不选
	$("#all").click(function(){   
    	if(this.checked){   
        	$("#list :checkbox").prop("checked", true);  
    	}else{   
		$("#list :checkbox").prop("checked", false);
    	}   
 	}); 
	//全选  
    $("#selectAll").click(function () {
         $("#list :checkbox,#all").prop("checked", true);  
    });  
	//全不选
    $("#unSelect").click(function () {  
         $("#list :checkbox,#all").prop("checked", false);  
    });  
    //反选 
    $("#reverse").click(function () { 
         $("#list :checkbox").each(function () {  
              $(this).prop("checked", !$(this).prop("checked"));  
         });
		 allchk();
    });
	
	//设置全选复选框
	$("#list :checkbox").click(function(){
		allchk();
	});
 
	//获取选中选项的值
	$("#getValue").click(function(){
		var valArr = new Array;
        $("#list :checkbox[checked]").each(function(i){
			valArr[i] = $(this).val();
        });
		var vals = valArr.join(',');
      	alert(vals);
    });
}); 
function allchk(){
	var chknum = $("#list :checkbox").size();//选项总个数
	var chk = 0;
	$("#list :checkbox").each(function () {  
        if($(this).prop("checked")==true){
			chk++;
		}
    });
	if(chknum==chk){//全选
		$("#all").prop("checked",true);
	}else{//不全选
		$("#all").prop("checked",false);
	}
}
</script>
<script>
$(function(){  
    $("#shanchu").click(function() {
        $("input[name='test']:checked").each(function() { // 遍历选中的checkbox
            n = $(this).parents("tr").index();  // 获取checkbox所在行的顺序
            $("table#list").find("tr:eq("+n+")").remove();
        });
    });
}); 
</script>


<script type="text/javascript">
$(document).ready(function(){
  $(".click").click(function(){
  $(".tipyuan").fadeIn(200);
  });
  
  $(".tiptop a").click(function(){
  $(".tipyuan").fadeOut(200);
});

  $(".sure").click(function(){
  $(".tipyuan").fadeOut(100);
});

  $(".cancel").click(function(){
  $(".tipyuan").fadeOut(100);
});

});
</script>


<script type="text/javascript">
$(document).ready(function(){
  $(".click1").click(function(){
  $(".xinzengnr").fadeIn(200);
  });
  
  $(".neirong a").click(function(){
  $(".xinzengnr").fadeOut(200);
});

  $(".sure").click(function(){
  $(".xinzengnr").fadeOut(100);
});

  $(".cancel").click(function(){
  $(".xinzengnr").fadeOut(100);
});

});
</script>




<script type="text/javascript">
$(document).ready(function(){
  $("#axq").click(function(){
  $("#riqi").hide();
   $("#xingqi").show();
  });
  
  
  $("#arq").click(function(){
  $("#riqi").show();
   $("#xingqi").hide();
  });
  
  
    $("#xinxi").click(function(){
  $("#xingqi").show();
   $("#riqi").hide();
  });
  
  
  
});



</script>


</head>


<body>

	<div class="place">
    <span>位置：</span>
    <ul class="placeul">
    <li><a href="#">首页</a></li>
    <li>警员历史信息查询</li>
    </ul>
    </div>
    
    <div class="rightinfo">
      
   

   
   <div class="rightinfo">
    
    <div class="tools">
    
  姓名<input name="" type="text" /> 时间<input name="" type="text" />
  <img src="images/chaxun.jpg" width="75" height="35" style=" vertical-align:middle" />
        
        
      <div style=" width:100; height:50; background-color:#000"></div>  
    
    </div>
   
    <table class="imgtable" id="list">  
    <tr class="imgtable1">
    <td  width="100px;">选择</td>
    <td>姓名</td>
    <td>警号</td>
    <td>询问室</td>
    <td>登记时间</td>
    <td>当前位置</td>
    <td>确认离开</td>
    </tr>
    <tr>
    <td class="imgtd"><input type="checkbox" name="test"></td>
    <td>张三</td>
    <td>3674888</td>
    <td>询问室一</td>
    <td>2016-10-23 11：10：11</td>
    <td>走廊</td>
    <td><input name="button" type="submit" class="btn" id="button" value="详细信息" />
    <input name="button" type="submit" class="btn" id="button" value="查看路径" /></td>
    </tr>
   
     <tr>
    <td class="imgtd"><input type="checkbox" name="test"></td>
    <td>李四</td>
    <td>3674888</td>
    <td>192.168.1.0</td>
    <td>2016-10-23 11：10：11</td>
    <td>卫生间</td>
    <td><input name="button" type="submit" class="btn" id="button" value="详细信息" />
    <input name="button" type="submit" class="btn" id="button" value="查看路径" /></td>
    </tr>
    
      <tr>
    <td class="imgtd"><input type="checkbox" name="test"></td>
    <td>王五</td>
    <td>3674888</td>
    <td>192.168.1.0</td>
    <td>2016-10-23 11：10：11</td>
    <td>走廊</td>
    <td><input name="button" type="submit" class="btn" id="button" value="详细信息" />
    <input name="button" type="submit" class="btn" id="button" value="查看路径" /></td>
    </tr>

    
    </table>
    
   
    <div class="pagin">
    	<div class="message">共<i class="blue">1256</i>条记录，当前显示第&nbsp;<i class="blue">2&nbsp;</i>页</div>
        <ul class="paginList">
        <li class="paginItem"><a href="javascript:;"><span class="pagepre"></span></a></li>
        <li class="paginItem"><a href="javascript:;">1</a></li>
        <li class="paginItem current"><a href="javascript:;">2</a></li>
        <li class="paginItem"><a href="javascript:;">3</a></li>
        <li class="paginItem"><a href="javascript:;">4</a></li>
        <li class="paginItem"><a href="javascript:;">5</a></li>
        <li class="paginItem more"><a href="javascript:;">...</a></li>
        <li class="paginItem"><a href="javascript:;">10</a></li>
        <li class="paginItem"><a href="javascript:;"><span class="pagenxt"></span></a></li>
        </ul>
    </div>
    
    
    
    
    
 <div class="tipyuan">
    
    	<div class="tiptop"><span>提示信息</span><a></a></div>
        <div style=" height:20px" ></div>
          <table width="800" border="1" class="zdgl" style=" margin:auto">
  <tr>
    <td colspan="6" class="textleft1">基本信息：</td>
  </tr>
  <tr>
    <td class="textleft">姓名</td>
    <td><input name="" type="text" /></td>
    <td class="textleft" >性别</td>
    <td class="textleft"><input name="" type="text" /></td>
    <td class="textleft">出生年月</td>
    <td><input name="" type="text" /></td>
  </tr>
    <tr>
      <td class="textleft">身份证号</td>
    <td><input name="" type="text" /></td>
    <td class="textleft">住址</td>
    <td colspan="3" class="textleft" ><input name="" type="text" style=" width:430px" /></td>  
  </tr>
    <tr>
    <td class="textleft">文化程度</td>
    <td><input name="" type="text" /></td>
    <td class="textleft" >国籍</td>
    <td class="textleft"><input name="" type="text" /></td>
    <td class="textleft">户籍地行政区划</td>
    <td><input name="" type="text" /></td>
  </tr>
  
   <tr>
      <td class="textleft">来联系方式</td>
    <td><input name="" type="text" /></td>
    <td class="textleft">户籍地</td>
    <td colspan="3" class="textleft" ><input name="" type="text" style=" width:430px" /></td>  
  </tr>
  
  
  
    <tr>
    <td colspan="6" class="textleft1">体貌特征：</td>
  </tr>
 <tr>
    <td class="textleft">身高</td>
    <td><input name="" type="text" /></td>
    <td class="textleft" >脸型</td>
    <td class="textleft"><input name="" type="text" /></td>
    <td class="textleft">体型</td>
    <td><input name="" type="text" /></td>
  </tr>
   
   
    <tr>
      <td class="textleft">血型</td>
    <td><input name="" type="text" /></td>
    <td class="textleft">特殊特征</td>
    <td colspan="3" class="textleft" ><input name="" type="text" style=" width:430px" /></td>  
  </tr>
  
      <tr>
      <td class="textleft">可疑依据</td>
    <td><input name="" type="text" /></td>
    <td class="textleft">备注</td>
    <td colspan="3" class="textleft" ><input name="" type="text" style=" width:430px" /></td>  
  </tr>
  
  
        <tr>
      <td rowspan="2" class="textleft">事由</td>
    <td  colspan="5" class="textrido"> <label>
						      <input type="radio" name="RadioGroup1" value="单选" id="arq">
						      采集信息</label>
      <label>
					          <input type="radio" name="RadioGroup1"  id="axq" value="单选">
			           询问</label>
                       <input type="radio" name="RadioGroup1"  id="xinxi" value="单选">
			           采集信息+询问</td>
    
  </tr>
        <tr>
          <td  colspan="5" class="textrido" > <div id="xingqi" style="display:none"> <label>
	 <input type="checkbox" name="CheckboxGroup1" value="复选框" id="CheckboxGroup1_0">
	询问室一
    </label>
                                 <input type="checkbox" name="CheckboxGroup1_" value="复选框" id="CheckboxGroup1_">
                                 询问室二
<input type="checkbox" name="CheckboxGroup1_2" value="复选框" id="CheckboxGroup1_2">
询问室三
<input type="checkbox" name="CheckboxGroup1_3" value="复选框" id="CheckboxGroup1_3">
询问室四
<input type="checkbox" name="CheckboxGroup1_4" value="复选框" id="CheckboxGroup1_4">
询问室五
<input type="checkbox" name="CheckboxGroup1_5" value="复选框" id="CheckboxGroup1_5">
询问室六
<input type="checkbox" name="CheckboxGroup1_6" value="复选框" id="CheckboxGroup1_6">
询问室七   <input type="checkbox" name="CheckboxGroup1_6" value="复选框" id="CheckboxGroup1_6">
询问室八</label></div></td>
        </tr>
  
  
 



  
  
      <tr>
    <td  class="textleft">禁止区域：</td>
    <td colspan="5" class="textleft"><input name="input" type="text" style=" width:638px; height:40px" /></td>
  </tr>
  
  
     <tr>
    <td colspan="6" class="textleft1">物品管理：</td>
  </tr>
  
  
 <tr>
    <td class="textleft">自封袋号</td>
    <td><input name="" type="text" /></td>
    <td class="textleft" >储物柜号</td>
    <td class="textleft"><input name="" type="text" /></td>
    <td class="textleft">接收人</td>
    <td><input name="" type="text" /></td>
  </tr>
     <tr>
      <td class="textleft">接时间</td>
    <td><input name="" type="text" /></td>
    <td class="textleft">物品内容</td>
    <td colspan="3" class="textleft" ><textarea name="" cols="" rows="" style=" width:430px; height:50px; background-color:#cccccc"></textarea></td>  
  </tr>
    </tr>
     <tr>
      <td class="textleft">填表人</td>
    <td><input name="" type="text" /></td>
    <td class="textleft"></td>
    <td colspan="3" class="textleft" ></td>  
  </tr>
  
</table>
        
        
        
      <div class="tipinfo">
        <span><img src="images/ticon.png" /></span>
        <div class="tipright">
        <p>是否确认对信息的修改 ？</p>
        <cite>如果是请点击确定按钮 ，否则请点取消。</cite>
        </div>
        </div>
        
        <div class="tipxyr">
        <input name="" type="button"  class="sure" value="提交" />&nbsp;
        <input name="" type="button"  class="cancel" value="取消" />
        </div>
    
    </div>
    
    
    
    
    
    
    
     
    <div class="xinzengnr">
    
    	<div class="neirong"><span>新增内容</span><a></a></div>
        <div style=" height:20px" ></div>

        
      <table width="620" border="1" class="zdglkey" style=" margin:auto; text-align:center; border-collapse:collapse" cellpadding="0" cellspacing="0" >
   
  <tr class="textct">
    <td width="100">选择设备</td>
    <td   style=" background-color:#F00"><div class="kePublic">
<!--效果html开始-->
<div class="selectbox">
<div class="select-bar">
    <select multiple="multiple" id="select1">
        <option value="超级管理员">A1监室</option>
        <option value="普通管理员">A2监室</option>
        <option value="信息发布员">A3监室</option>
        <option value="财务管理员">A4监室</option>
        <option value="产品管理员">A5监室</option>
        <option value="资源管理员">A6监室</option>
        <option value="系统管理员">A7监室</option>
        <option value="超级管理员">A8监室</option>
        <option value="普通管理员">A9监室</option>
        <option value="信息发布员">A10监室</option>
        <option value="财务管理员">A11监室</option>
        <option value="产品管理员">A12监室</option>
        <option value="资源管理员">A13监室</option>
        <option value="科e互联">A11监室</option>
    </select>
</div>

<div class="btn-bar">
    <p><span id="add"><input type="button" class="btn" value=">" title="移动选择项到右侧"/></span></p>
    <p><span id="add_all"><input type="button" class="btn" value=">>" title="全部移到右侧"/></span></p>
    <p><span id="remove"><input type="button" class="btn" value="<" title="移动选择项到左侧"/></span></p>
    <p><span id="remove_all"><input type="button" class="btn" value="<<" title="全部移到左侧"/></span></p>
</div>
<div class="select-bar">
    <select multiple="multiple" id="select2"></select>
</div>	
</div>
<!--效果html结束-->
<div class="clear"></div>
</div></td> 
    
  </tr>
  
   <tr class="textct">
    <td>选择功能</td>
    <td align="left" style="padding-left:20px"><select name="" class="input1">
      <option>打开网页</option>
      <option>打开对讲</option>
      <option>打开视频</option>
      <option>文字弹出通知</option>
       <option>文字滚动通知</option>
       <option>语音播报通知</option>
      <option>启动APP</option>
      <option>关闭APP</option>
    </select></td> 
    
  </tr>
  
  
   <tr class="textct">
    <td>参数设置</td>
    <td align="left" style="padding-left:20px"><input name="textfield" type="text" class="input1" id="textfield" /></td> 
    
  </tr>
    
    
</table>
        <div class="tipbtn">
        <input name="" type="button"  class="sure" value="提交" />&nbsp;
        <input name="" type="button"  class="cancel" value="取消" />
        </div>
    
    </div>
    
    
    
    </div>
    
    <p>&nbsp; </p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp; </p>






<script type="text/javascript">
	$('.tablelist tbody tr:odd').addClass('odd');
	  </script>
</body>

</html>
